<template>
  <view class="learn">
    <view class="learning-center">
      <view class="learning">
        <text>学习中心</text>
        <up-icon name="search" color="#333333" size="35"></up-icon>
      </view>
      <up-scroll-list :indicator="false">
        <view
          v-for="(item, index) in courseList"
          :class="{ active: scrollIndex == item.value }"
          :key="index"
          class="item"
          @click="itemCourse(item)"
        >
          <view class="item-label">{{ item.label }}</view>
        </view>
      </up-scroll-list>
    </view>
    <view class="popular-courses">
      <view class="learning">
        <text>热门课程</text>
      </view>
      <view class="courses">
        <view
          v-for="(item, index) in popularCoursesList"
          :key="index"
          @click="navigator(item)"
          class="item-courses"
        >
          <img class="icon-img" :src="item.pathUrl" />
          <view class="footer-content">
            <view class="item-title">{{ item.title }}</view>
            <text>{{ item.teacher }}</text>
            <view class="item-footer">
              <up-icon
                name="star-fill"
                size="20"
                :color="item.rating ? '#ffcf49' : '#cccccc'"
              ></up-icon>
              <text>{{ item.rating }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <tabbar v-model:tabbarIndex="tabbarIndex"></tabbar>
</template>
<script setup lang="ts">
import tabbar from "@/components/tabbar.vue";
const tabbarIndex = ref<any>(3);
const scrollIndex = ref<any>(null);
const courseList = ref<any>([
  {
    label: "全部",
    value: null,
  },
  {
    label: "技术分享课程",
    value: 1,
  },
  {
    label: "行业资讯",
    value: 2,
  },
  {
    label: "考试培训",
    value: 3,
  },
]);
const popularCoursesList = ref<any>([
  {
    id: 1,
    title: "植保无人机作业实战",
    teacher: "张教授",
    rating: 10,
    pathUrl:
      "	https://img2.baidu.com/it/u=856722127,2758625664&fm=253&fmt=auto&app=138&f=JPEG?w=543&h=500",
  },
  {
    id: 2,
    title: "无人机技术在农业生产应用广泛，例如无人机大范围拍照视察等",
    teacher: "王教授",
    rating: 0,
    pathUrl:
      "https://img2.baidu.com/it/u=856722127,2758625664&fm=253&fmt=auto&app=138&f=JPEG?w=543&h=500",
  },
  {
    id: 1,
    title: "植保无人机作业实战",
    teacher: "张教授",
    rating: 10,
    pathUrl:
      "	https://img2.baidu.com/it/u=856722127,2758625664&fm=253&fmt=auto&app=138&f=JPEG?w=543&h=500",
  },
  {
    id: 2,
    title: "无人机技术在农业生产应用广泛，例如无人机大范围拍照视察等",
    teacher: "王教授",
    rating: 0,
    pathUrl:
      "https://img2.baidu.com/it/u=856722127,2758625664&fm=253&fmt=auto&app=138&f=JPEG?w=543&h=500",
  },
  {
    id: 1,
    title: "植保无人机作业实战",
    teacher: "张教授",
    rating: 10,
    pathUrl:
      "	https://img2.baidu.com/it/u=856722127,2758625664&fm=253&fmt=auto&app=138&f=JPEG?w=543&h=500",
  },
]);
const itemCourse = (item: any) => {
  scrollIndex.value = item.value;
};
const navigator = (item: any) => {
  uni.navigateTo({
    url: `/detailsPages/details/courselink`,
  });
};
</script>
<style lang="scss" scoped>
.learn {
  height: 100vh;
  .learning-center {
    border-bottom: 1px solid #f3f4f6;
    padding: 20px;
    .item-scroll {
      display: flex;
      align-items: center;
    }
  }
  .learning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }
  .item {
    padding: 5px 20px;
    border-radius: 20px;
    background-color: #f5f7fa;
    color: #666666;
    text-align: center;
    white-space: nowrap;
    margin-top: 10px;
    &.active {
      background-color: #1677ff;
      color: white;
    }
    &:not(:first-child) {
      margin-left: 10px;
    }
  }
  .popular-courses {
    padding: 20px;
    margin-bottom: 20px;
    .learning {
      margin-bottom: 20ox;
    }
    .courses {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -5px 120px -5px;
      .item-footer {
        display: flex;
        align-items: center;
      }
      .item-courses {
        border-radius: 6px;
        width: calc(50% - 12px);
        margin: 5px;
        border: 1px solid #e5e7eb;
        .icon-img {
          min-width: 100%;
          height: 105px;
          border-radius: 6px 6px 0 0;
        }
        .footer-content {
          padding: 10px 10px 15px 10px;
          .item-title {
            font-size: 15px;
            font-weight: bold;
            color: #333333;
            max-width: 100%;
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 显示省略号来表示溢出的内容 */
          }
          text {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
